<template>
  <div class="k-flow-box">
    <div class="k-title">
      <img class="k-item-bg" :src="guimg" alt="" srcset="" />
      <div
        class="k-tab-1"
        @click="setleaderSystemOperation(false)"
        :class="{ 'k-font-effect': !leaderSystemOperation }"
      >
        林长工作动态
      </div>
      /
      <div
        class="k-tab-2"
        :class="{ 'k-font-effect': leaderSystemOperation }"
        @click="setleaderSystemOperation(true)"
      >
        林长制体系运行
      </div>
    </div>

    <div class="k-flow-item" v-if="!leaderSystemOperation">
      <div class="k-flow-item-box">
        <div class="k-item-box">
          <div style="color: aquamarine">工作职责</div>
          <!-- <div>更多</div> -->
        </div>
        <n-carousel
          direction="vertical"
          dot-placement="right"
          :autoplay="datas.patrolList.length > 2"
          slides-per-view="auto"
          :loop="true"
          draggable
          :interval="1000"
        >
          <n-carousel-item style="height: 50%" v-for="item in datas.patrolList">
            <div class="k-item-box">
              <NEllipsis style="width: 290px">{{ item.title }}</NEllipsis>
              <div>{{ item.date }}</div>
              <!-- <div>{{ PageData.leaderWork.patrolList[0].date }}</div> -->
            </div>
          </n-carousel-item>
        </n-carousel>
      </div>
      <div class="k-flow-item-box">
        <div class="k-item-box">
          <div style="color: aquamarine">林长令</div>
          <!-- <div>更多</div> -->
        </div>
        <n-carousel
          direction="vertical"
          dot-placement="right"
          :autoplay="datas.leaderOrderList.length > 2"
          slides-per-view="auto"
          :loop="true"
          draggable
          :interval="1000"
        >
          <n-carousel-item
            style="height: 50%"
            v-for="item in datas.leaderOrderList"
          >
            <div class="k-item-box">
              <NEllipsis style="width: 290px">{{ item.title }}</NEllipsis>
              <div>{{ item.date }}</div>
              <!-- <div>{{ PageData.leaderWork.patrolList[0].date }}</div> -->
            </div>
          </n-carousel-item>
        </n-carousel>
      </div>
      <div class="k-flow-item-box">
        <div class="k-item-box">
          <div style="color: aquamarine">巡林督查</div>
          <!-- <div>更多</div> -->
        </div>
        <n-carousel
          direction="vertical"
          dot-placement="right"
          :autoplay="datas.meetingList.length > 2"
          slides-per-view="auto"
          :loop="true"
          draggable
          :interval="1000"
        >
          <n-carousel-item
            style="height: 50%"
            v-for="item in datas.meetingList"
          >
            <div class="k-item-box">
              <NEllipsis style="width: 290px">{{ item.title }}</NEllipsis>
              <div>{{ item.date }}</div>
              <!-- <div>{{ PageData.leaderWork.patrolList[0].date }}</div> -->
            </div>
          </n-carousel-item>
        </n-carousel>
      </div>
    </div>
    <div class="k-flow-item" v-if="leaderSystemOperation">
      <div class="k-flow-item-box" style="height: 300px">
        <!-- <div class="k-item-box">
          <div style="color: aquamarine">工作职责</div>
          <div>更多</div>
        </div> -->
        <NScrollbar style="height: 290px">
          <div class="k-item-box" v-for="item in datas1" :key="item.title">
            <NEllipsis style="width: 290px">{{ item.title }}</NEllipsis>
            <div>{{ item.date }}</div>
          </div>
        </NScrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, computed } from "vue";

import { NScrollbar, NEllipsis, NCarousel, NCarouselItem } from "naive-ui";
import { PageData } from "../../composables/useMapView";
import guimg from "../../assets/images/titlelogo.png";
const leaderSystemOperation = ref(false);

const setleaderSystemOperation = (value: boolean) => {
  leaderSystemOperation.value = value;
};
// 将日期格式修改为 yy-mm-dd 并排序
const formattedData = (data: { date: string; title: string }[]) => {
  return data
    .map((item) => {
      // 格式化日期
      const date = new Date(item.date);
      const yy = date.getFullYear().toString().slice(-2); // 获取年份的最后两位
      const mm = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份并补零
      const dd = String(date.getDate()).padStart(2, "0"); // 获取日期并补零

      // 返回新的对象，日期格式修改为 yy-mm-dd
      return {
        ...item,
        date: `${yy}-${mm}-${dd}`,
      };
    })
    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
}; // 按时间排序
const datas = computed(() => {
  return {
    patrolList: formattedData(PageData.value.leaderWork.patrolList),
    leaderOrderList: formattedData(PageData.value.leaderWork.leaderOrderList),
    meetingList: formattedData(PageData.value.leaderWork.meetingList),
  };
});

const datas1 = computed(() => {
  return formattedData(PageData.value.leaderSystemOperation);
});

watch(
  () => PageData.value,
  (nv) => {
    leaderSystemOperation.value = false;
    // console.log(PageData.value);
  }
);
</script>

<style scoped lang="scss">
:deep(.n-carousel .n-carousel__dots) {
  opacity: 0;
}
.k-flow-box {
  position: relative;
  width: 380px;
  height: 328px;
  top: 10px;
  left: 10px;
  .k-title {
    position: relative;

    width: 378px;
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .k-tab-1,
    .k-tab-2 {
      width: auto;
      height: 40px;
      // box-shadow: inset 0px 4px 10px 0px rgba(23, 202, 187, 0.42),
      //   inset 0px -4px 8px 0px rgba(23, 202, 187, 0.42);
      line-height: 40px;
      text-align: center;
      margin-right: 5px;
      margin-left: 5px;
      color: #ffffff;
      font-size: 12px;
      &:hover {
        cursor: pointer;
      }
    }
    .k-font-effect {
      font-size: 16px;
      font-family: "HYk2gj";
      text-shadow: 0 0 5px #00ff00;
    }
  }
  .k-flow-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .k-flow-item-box {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 95px;
      justify-content: flex-start;
      margin-top: 6px;
      color: #ffffff;
      .k-item-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
